<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
    <meta charset="UTF-8">
    <title>第一次测试</title>
</head>
<body>
<!--表格的定义-->
<table id="dg"></table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newStudent()">New</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editStudent()">Edit </a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyStudent()">Remove</a>
</div>
<!--formb表单 以及弹窗的定义-->
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div tyle="color: skyblue">User Information</div><hr />
    <form id="form">
        <table cellpadding="5">
            <tr>
                <td>sno:</td>
                <td><input class="easyui-textbox"  style="width: 200px;height:32px" type="text" name="sno" id="sno" ></td>
            </tr>
            <tr>
                <td>sname:</td>
                <td><input class="easyui-textbox"  style="width: 200px;height:32px" type="text" name="sname" id="sname" data-options="required:true"></td>
            </tr>
            <tr>
                <td>ssex:</td>
                <td><input  class="easyui-textbox"  style="width:100%;height:32px" type="text" name="ssex"  data-options="required:true"></td>
            </tr>
            <tr>
                <td>sbirthday:</td>
                <td><input class="easyui-datetimespinner" style="width:100%;height:32px"   name="sbirthday" value="6/24/2014 17:23" ></td>
            </tr>
            <tr>
                <td>classes:</td>
                <td><input class="easyui-textbox" style="width:100%;height:32px"  type="text" name="classes"  ></td>
            </tr>
        </table>
    </form>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveStudent()">Save</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
</div>


<script type="text/javascript">
 <!--表格初始化-->
    var url ="";
    $("#dg").datagrid({
        url:"/day13/dataDatagrid",
        singleSelect:true,
        toolbar:"#toolbar",
        rownumbers:"true",
        fitColumns:"true",
        columns:[[
            {field:'sno',title:'学号',width:100},
            {field:'sname',title:'姓名',width:100},
            {field:'ssex',title:'性别',width:100},
            {field:'sbirthday',title:'出生日期',width:200},
            {field:'classes',title:'班级',width:100}
        ]]
    });
// form初始化
    $("#form").form({});

//    弹窗初始化
    $("#dlg").dialog({});

//    函数的实现
//
    function newStudent() {
        $("#dlg").dialog('open').dialog('setTitle','New Student');
        $("#sno").textbox('readonly',true);
        $("#form").form('clear');
        url="/day13/saveStudent";
    }

    function editStudent() {
        var row = $('#dg').datagrid('getSelected');
        if (row){
            console.log(row.sname);
            $('#dlg').dialog('open').dialog('setTitle','Edit User');
            $("#sno").textbox('readonly',true);
            $('#form').form('load',{
                sno:row.sno,
                sname:row.sname,
                ssex:row.ssex,
                sbirthday:row.sbirthday,
                classes:row.classes
            });
            url = '/day13/updataStudent?row'
        }
    }
    function saveStudent() {
        $("#form").form('submit',{
            url:url,
            success: function(result){
                var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');		// close the dialog
                    $('#dg').datagrid('reload');	// reload the user data
                }
            }
        });
    }
//    删除用户
    function destroyStudent() {
        var row = $("#dg").datagrid('getSelected');
        if(row){
            $.messager.confirm('Confirm','Are you sure you want to destroy this Student',function (r) {
                if(r){
                    $.post('/day13/removeStudent',row,function (result) {
                            $('#dg').datagrid('reload');
                    })
                }
            });
        }
    }

</script>
</body>

</html>